<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>任务详情</text>
		</view>
	</view>

	<view class="body">
		<view class="container">
			<view class="conrent">
				<view class="headtext">
					任务名称
				</view>
				<view class="context">
					<text>任务名称内容</text>
				</view>
			</view>


			<view class="conrents">
				<view class="headtext">
					任务内容
				</view>
				<view class="context">
					<text>内容</text>
				</view>
			</view>

			<view class="conrent">
				<view class="headtext">
					任务时间
				</view>
				<view class="context">
					<text>2025-03-05至2025-04-05</text>
				</view>
			</view>



			<view class="conrents">
				<view class="headtext">
					备注
				</view>
				<view class="context">
					<text>内容</text>
				</view>
			</view>

			<view class="conrentp">
				<view class="headtext">
					<text>*</text>落实照片
				</view>
				<view class="context" @click="handlePreviewOrChoose">
				  <image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/xianji.png"  class="xiangji" v-if="!imagePath"></image>
				  <image :src="imagePath " mode="" v-else class="newpicture" ></image>
				  <text v-if="!imagePath">(选择照片)</text>
				  <view v-else class="onw" @click.stop="clipicture">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/chahao.png" mode=""></image>
				  </view>
				</view>
				<button class="button">提交</button>
			</view>


		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
	function back() {
		uni.navigateBack({
			delta: 1
		})
	}
	
	const imagePath = ref('') // 存储选择的图片路径
	const handlePreviewOrChoose = () => {
	  if (imagePath.value) {
	    previewImage()
	  } else {
	    chooseImage()
	  }
	}
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      imagePath.value = tempFilePath
      uploadImage(tempFilePath)
    },
    fail: (err) => {
      console.error('选择图片失败:', err)
    }
  })
}

// 图片上传函数
// const uploadImage = (filePath) => {
//   uni.uploadFile({
//     url: 'https://yourdomain.com/upload', // 替换为你的上传接口地址
//     filePath: filePath,
//     name: 'file',
//     formData: {
//       user: 'test'
//     },
//     success: (uploadRes) => {
//       console.log('上传成功:', uploadRes.data)
//       // 如果需要更新 imagePath 到服务器返回的实际路径，可以在这里处理
//     },
//     fail: (uploadErr) => {
//       console.error('上传失败:', uploadErr)
//     }
//   })
// }

// 图片预览
const previewImage = () => {
  if (imagePath.value) {
    uni.previewImage({
      urls: [imagePath.value], // 要预览的图片URL列表
      current: 0, // 当前显示图片的索引
      longPressActions: {
        itemList: ['发送给朋友', '保存图片', '收藏'],
        success: function(data) {
          console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
        },
        fail: function(err) {
          console.log(err.errMsg);
        }
      }
    });
  }
}
function clipicture(){
	imagePath.value = ""
}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100vh;
	}

	.container {
		width: 750rpx;
		height: 100vh;
	}

	.conrent {
		width: 637rpx;
		// height: 300rpx;
		margin: 0 auto;
		overflow: hidden;

		.headtext {
			width: 150 rpx;
			height: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 32rpx;
			margin-top: 42rpx;
		}

		.context {
			margin-top: 30rpx;
			width: 637rpx;
			height: 94rpx;
			background: #F5F6F8;
			border-radius: 7rpx;
			position: relative;

			text {
				display: inline-block;
				width: 380rpx;
				height: 29rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 31rpx;
				color: #000000;
				line-height: 29rpx;
				position: absolute;
				top: 32rpx;
				left: 30rpx;
			}
		}
	}


	.conrents {
		width: 637rpx;
		// height: 300rpx;
		margin: 0 auto;
		overflow: hidden;

		.headtext {
			width: 150 rpx;
			height: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 32rpx;
			margin-top: 42rpx;

			text {
				color: red;
			}
		}

		.context {
			margin-top: 30rpx;
			width: 637rpx;
			height: 224rpx;
			background: #F5F6F8;
			border-radius: 7rpx;
			position: relative;

			text {
				display: inline-block;
				width: 186rpx;
				height: 29rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 31rpx;
				color: #000000;
				line-height: 29rpx;
				position: absolute;
				top: 32rpx;
				left: 30rpx;
			}
		}
	}







	.conrentp {
		width: 637rpx;
		// height: 300rpx;
		margin: 0 auto;
		overflow: hidden;

		.headtext {
			width: 150 rpx;
			height: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 32rpx;
			margin-top: 42rpx;

			text {
				color: red;
			}
		}

		.context {
			margin-top: 30rpx;
			width: 211rpx;
			height: 212rpx;
			background: #FFFFFF;
			border-radius: 7rpx;
			border: 2px Dashed #BFBFBF;
			position: relative;

			.xiangji {
				width: 56rpx;
				height: 49rpx;
				position: absolute;
				top: 61rpx;
				left: 75rpx;
			}

              .newpicture{
				  width: 211rpx;
				  height: 212rpx;
			  }
			text {
				display: inline-block;
				width: 110rpx;
				height: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				line-height: 43rpx;
				position: absolute;
				bottom: 62rpx;
				left: 54rpx;
			}
		}

		.button {
			margin-top: 55rpx;
			wwidth: 672rpx;
			height: 88rpx;
			background: #0874FA;
			border-radius: 44rpx;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
	.onw{
		display: inline-block;
		position: absolute;
		width: 50rpx;
		height: 50rpx;
		background-color: #f5f6f8;
		top: -20rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50%;
		right: -10rpx;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>